<template>
	<view class="payment">
		<view class="top">
			<text class="top-l color1">订单金额¥240.0</text>
			<text class="top-r color9">29:59将关闭订单</text>
		</view>
		<view class="block1">
			<view class="item1">
				<text>可用余额</text>
				<text>支付金额</text>
			</view>
			<view class="item2">
				<text class="size36">¥{{usableMoney}}</text>
				<text class="color1 size48">¥89.70</text>
			</view>
		</view>
		<view class="block2">
			<view class="title">选择付款方式</view>
			<view class="block2-item">
				<view class="item-l">
					<text class="wechat iconfont icon-weixinzhifu"></text>
				</view>
				<view class="item-c">微信</view>
				<view class="item-r"></view>
			</view>
			<view class="block2-item">
				<view class="item-l">
					<text class="alipay iconfont icon-iconfontrectangle390"></text>
				</view>
				<view class="item-c">支付宝</view>
				<view class="item-r"></view>
			</view>
		</view>
		<view class="bottom" @click="confirmPay()">确认支付 ¥89.70</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {uniIcons},
		data() {
			return {
				usableMoney:'',
				orderId:'',
			};
		},
		onLoad(option) {
			this.orderId = option.orderId;
			this.getMoney();
			this.getOrderDetail();
		},
		methods:{
			 getMoney(){
			},
			getOrderDetail(){
			},
			confirmPay(){
				
			},
		}
	}
</script>

<style>
.payment {
	width: 100%;
	min-height: 100%;
	background-color: #f3f3f3;
	position: absolute;
	font-size: 26upx;
}
.top {
	width: 100%;
	height: 160upx;
	background-color: #fff;
	line-height: 160upx;
	padding: 0 40upx;
}
.top-l {
	float: left;
	font-size: 30upx;
}
.top-r {
	float: right;
}
.block1 {
	width: 100%;
	height: 160upx;
	padding: 20upx 40upx;
	background-color: #fff;
	margin-top: 20upx;
}
.block1>view {
	line-height: 60upx;
	font-size: 30upx;
}
.block1>view text:last-child {
	float: right;
}
.block2 {
	margin-top: 20upx;
	width: 100%;
	padding: 0 30upx;
	background-color: #fff;
}
.block2 .title {
	height: 80upx;
	line-height: 80upx;
}
.block2 .block2-item {
	display: flex;
	height: 100upx;
	display: flex;
	line-height: 100upx;
	font-size: 30upx;
}
.block2 .block2-item .item-l {
	width: 40upx;
	margin-right: 20upx;
}
.block2 .block2-item .item-c {
	flex: 1;
}
.block2 .block2-item .item-r {
	width: 60upx;
}
.wechat {
	color: #2CAA4F;
}
.alipay {
	color: #259AE4;
}
.bottom {
	width: 100%;
	height: 120upx;
	background-color: #F52A4C;
	line-height: 120upx;
	position: fixed;
	bottom: 0;
	text-align: center;
	color: #fff;
	font-size: 30upx;
}
</style>
